<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2023-07-04 15:36:37
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-01-24 09:47:19
 * @FilePath: \cxl-h5\src\pages\report\base\Index.vue
-->
<template>
    <section>
        <!-- 报告加载中 -->
        <section class="waiting" v-show="!reportLoad">
            <section class="waiting-img"></section>
            <p>报告加载中...</p>
        </section>
        <!-- 报告加载完成 -->
        <section v-show="reportLoad">
            <section class="report-main" v-show="!reportQueryFail">
                <section id="report">
                    <section :class="['report-box', carPlateNoColor]">
                        <!-- 报告信息 -->
                        <section class="car-info">
                            <!-- 车辆类型 -->
                            <section class="car-type">
                                <template v-if="baseInfo.plateNo && baseInfo.plateNo.length > 6">
                                    <span>{{ baseInfo.models || baseInfo.brandname }}</span>
                                    <span>{{
                                        Number(reportType) === 1
                                            ? '碰撞、保险分析'
                                            : Number(reportType) === 2
                                            ? '维保车况'
                                            : '动力电池分析'
                                    }}</span>
                                </template>
                                <template v-else>
                                    <span
                                        >{{ baseInfo.brandname
                                        }}{{
                                            Number(reportType) === 1
                                                ? '碰撞、保险分析'
                                                : Number(reportType) === 2
                                                ? '维保车况'
                                                : '动力电池分析'
                                        }}</span
                                    >
                                    <span></span>
                                </template>

                                <span v-if="Number(reportType) === 1">（仅参考，以实际车辆情况为准）</span>
                            </section>
                            <!-- 报告编码 -->
                            <section class="report-code">
                                <span>报告编码：{{ baseInfo.reportNo }}</span>
                                <span>{{ baseInfo.generateTime }}</span>
                            </section>
                            <!-- 车辆信息 -->
                            <section :class="['car', Number(reportType) === 3 ? 'new-energy' : '']">
                                <section class="car-content">
                                    <section class="car-logo">
                                        <img :src="baseInfo.brandLogo" alt="" srcset="" />
                                    </section>
                                    <section class="car-detailed">
                                        <h1>
                                            {{ baseInfo.brandname }}
                                            <!-- 产品说的，车牌为空 | 车牌尾数不足 不显示 -->
                                            <!-- <i
                                                :class="carPlateNoColor"
                                                v-if="baseInfo.plateNo && baseInfo.plateNo.length > 6"
                                                >{{ baseInfo.plateNo }}</i
                                            > -->
                                        </h1>
                                        <p>VIN码：{{ baseInfo.vin }}</p>
                                        <!-- (1.绿牌；2.蓝牌；3.其他) -->
                                        <p v-if="Number(reportType) === 1">
                                            新能源车：{{
                                                Number(baseInfo.licensePlateColor) === 1
                                                    ? baseInfo.fuelType
                                                    : Number(baseInfo.licensePlateColor) === 2
                                                    ? '否'
                                                    : '否'
                                            }}
                                        </p>
                                        <p v-else-if="Number(reportType) === 3">上市时间：{{ baseInfo.listingTime }}</p>
                                    </section>
                                </section>
                                <!-- 动力电池 -->
                                <section class="new-energy" v-if="Number(reportType) === 3">
                                    <section class="level">
                                        <section
                                            :class="['level-li', scoreLevel === index ? 'active_' + scoreLevel : '']"
                                            v-for="(item, index) in level"
                                            :key="item"
                                        >
                                            <span>{{ item }}</span>
                                            <i></i>
                                        </section>
                                    </section>
                                    <h3>综合第三方数据解析排查，该车车况评级</h3>
                                    <h4>（仅参考，具体车况以实车情况为准）</h4>
                                </section>
                            </section>
                        </section>
                        <slot name="body"></slot>
                        <!-- 免责声明 -->
                        <section
                            :class="['statement', Number(reportType) === 3 ? 'new-energy' : fromCase ? '' : 'active']"
                        >
                            <p>免责声明：</p>
                            <span>{{ Number(reportType) === 1 ? statementText : newEnergyStatementText }}</span>
                        </section>
                        <!-- 名词解释 -->
                        <section
                            v-if="Number(reportType) === 3"
                            :class="['noun', 'statement', fromCase ? '' : 'active']"
                        >
                            <p>名词解释：</p>
                            <span v-html="nounText"></span>
                        </section>
                    </section>
                    <!-- 水印 -->
                    <!-- <watermark v-if="watermarkVisible"></watermark> -->
                </section>

                <!-- 返回顶部 -->
                <Transition name="fade" mode="out-in" appear>
                    <section class="go-top" v-if="goTopVisible" @click="onGoTop">
                        <span><span class="iconfont icon-arrow-down"></span></span>
                        <p>TOP</p>
                    </section>
                </Transition>

                <!-- 下载 分享 -->
                <Transition name="bottomfade" mode="out-in" appear>
                    <section :class="['down-share', isShare ? 'active' : '']" v-if="bottomFnVisible">
                        <section>
                            <span @click="onDownloadReprot">下载报告</span>
                            <span @click="onShareHint(true)" v-if="!isShare">分享给微信好友</span>
                        </section>
                    </section>
                </Transition>

                <!-- 分享提示 -->
                <Transition name="fade" mode="out-in" appear>
                    <section class="share-hint" v-if="shareDialogVisible" @click="onShareHint(false)">
                        <img src="../../../assets/images/icon_fxgz@2x.png" alt="" />
                    </section>
                </Transition>

                <!-- 生成图片弹窗 -->
                <Transition name="fade" mode="out-in" appear>
                    <section class="download-image" v-if="downloadImageVisible" @click.self="onCloseDownload">
                        <section class="img-box"><img :src="downloadImageUrl" alt="" /></section>
                        <p>长按图片保存</p>
                        <section class="close">
                            <span class="iconfont icon-shanchu" @click="onCloseDownload"></span>
                        </section>
                    </section>
                </Transition>

                <!-- 生成图片loading -->
                <loading v-model="loadingVisible" />
            </section>
            <section class="fail" v-show="reportQueryFail">
                <section class="fail-body">
                    <img src="../../../assets/images/icon_bq@2x.png" alt="" />
                    <p>很抱歉，报告查询失败！</p>
                </section>
            </section>

            <!-- 报告过期 -->
            <section class="reportExpire" v-show="reportExpire">
                <section class="icon">
                    <img src="../../../assets/images/icon_expire.png" alt="" />
                </section>
                <h1>报告已失效，</h1>
                <h1>您可返回首页重新查询其车辆最新车况</h1>
                <p>{{ baseInfo.models }}</p>
                <span>VIN码：{{ baseInfo.vin }}</span>
                <section class="goback" @click="goHome">返回首页</section>
            </section>
        </section>
    </section>
</template>
<script setup lang="ts">
import { ref, reactive, watchEffect } from 'vue'
import loading from '@/components/loading/Index.vue'
import { createDownloadImage } from '@/utils/htmlPdf'
import scrollIntoView from 'smooth-scroll-into-view-if-needed'
import { useRouter } from 'vue-router'
// import router from '@/router'

const router = useRouter()

//接收父级传递的参数
const props = defineProps([
    'watermarkVisible',
    'isShare',
    'goTopVisible',
    'bottomFnVisible',
    'fromCase',
    'reportType',
    'baseInfo',
    'status',
    'scoreLevel',
    'reportExpire',
    'reportLoad'
])
//注册父级回调
const emits = defineEmits(['createDownloadReport', 'goTop', 'hideDownload'])

//报告是否加载完成
const reportLoad = ref(false)

//报告过期
const reportExpire = ref(true)

//基本信息
const baseInfo = reactive({
    brandLogo: '',
    generateTime: '',
    reportNo: '',
    vin: '',
    plateNo: '',
    licensePlateColor: 1,
    models: '',
    brandname: '',
    orderNo: '',
    fuelType: '汽油',
    displacement: '', //排量
    listingTime: ''
})
//等级 1优秀 2良好 3一般 4较差
const scoreLevel = ref(0)
const level = reactive(['优秀', '良好', '一般', '较差'])

//报告查询状态
const reportQueryFail = ref(true)
//报告类型 1出险 2 维保车况 3新能源车况
const reportType = ref(1)
//水印是否显示
const watermarkVisible = ref(false)
//返回顶部是否显示
const goTopVisible = ref(false)
//是否是从分享进入
const isShare = ref(false)
//底部按钮是否显示
const bottomFnVisible = ref(false)
//分享提示弹窗是否显示
const shareDialogVisible = ref(false)
//生成的图片弹窗是否显示
const downloadImageVisible = ref(false)
//生成的图片url
const downloadImageUrl = ref('')
//生成图片过程的loading是否显示
const loadingVisible = ref(false)
//是否从分享出进入报告页面
const fromCase = ref(false)
//出险报告免责声明
const statementText = ref(
    '本报告所含内容均来源于第三方数据平台，报告内容仅基于截止到报告购买日期收集到的相关信息记录，其他信息等有可能未被录入/记录系统，本报告仅供您参考，本平台不对数据内容的准确性、完整性提供任何保证。请您结合实车勘验结果和试乘试驾体验，做出更加精准的决策。本报告有效期30天，超过30天则需要重新生成新的报告。'
)
//新能源车况免责声明
const newEnergyStatementText = ref(
    '本报告仅是交易参考资料之一，动力电池工作状态会因气温、季节、地区的差异出现偏差，请您结合实车勘验结果和试乘试驾体验，做出更精准的决策。'
)
//名词解释
const nounText =
    ref(`<i style='font-weight:600;color:#333;margin: 6px 0 0 0;display: inline-block;'>舒适温度运行占比：</i>车辆运行在10~45°C的时间/总运行时间，表征车辆在最佳运行温度区间的使用时间占比，该值越小，电池衰退相对越快。
    <br>
    <i style='font-weight:600;color:#333;margin: 6px 0 0 0;display: inline-block;'>行车最高频率下的起始SOC：</i>历史所有行驶记录中，以每10个SOC进行区间划分如O-10、10-20等，并统计各区间行车次数最多的开始SOC区间作为最高充电频率。
    <br>
    <i style='font-weight:600;color:#333;margin: 6px 0 0 0;display: inline-block;'>行车最高频率下的截止SOC：</i>历史所有行驶记录中，以每10个SOC进行区间划分如O-10、10-20等，并统计各区间行车次数最多的结束SOC区间作为最高充电频率。数值越小，对电池影响越大。
    <br>
    <i style='font-weight:600;color:#333;margin: 6px 0 0 0;display: inline-block;'>行驶最高温度平均：</i>历史所有行驶过程最高温度的平均值;反应了车辆行驶时的最高温度情况，数值越小，车辆衰退越缓慢。
    <br>
    <i style='font-weight:600;color:#333;margin: 6px 0 0 0;display: inline-block;'>行驶最低温度平均：</i>历史所有行驶过程最低温度的平均值;反应了车辆行驶时的最低温度情况。合理值在5~35℃之间，数值越低或越高，对电池影响越大。`)

//车牌颜色
const carPlateNoColor = ref('')

//点击返回顶部
const onGoTop = () => {
    const box = document.querySelector('.car-info') as HTMLElement
    scrollIntoView(box, {
        scrollMode: 'if-needed',
        behavior: 'smooth'
    })
    emits('goTop')
}
//返回主页
const goHome = () => {
    router.replace('/index')
}

//点击下载报告生成报告图片
const isCase = ref(false)
const onDownloadReprot = () => {
    emits('createDownloadReport')
    loadingVisible.value = true
    watermarkVisible.value = false
    bottomFnVisible.value = false
    goTopVisible.value = false
    //
    fromCase.value = true
    //1s后执行生成图片
    const timer = setTimeout(() => {
        createDownloadImage('report', 'report').then(res => {
            loadingVisible.value = false
            fromCase.value = isCase.value
            downloadImageVisible.value = true
            downloadImageUrl.value = res
            watermarkVisible.value = true
        })

        clearTimeout(timer)
    }, 1500)
}
//控制分享提示是否显示
const onShareHint = (visible: boolean) => {
    shareDialogVisible.value = visible
}
//点击关闭下载图片弹窗
const onCloseDownload = () => {
    downloadImageVisible.value = false
    bottomFnVisible.value = true
    goTopVisible.value = true
    emits('hideDownload')
}

watchEffect(() => {
    console.log('props', props)
    watermarkVisible.value = props.watermarkVisible
    goTopVisible.value = props.goTopVisible
    isShare.value = props.isShare
    bottomFnVisible.value = props.bottomFnVisible
    fromCase.value = props.fromCase
    isCase.value = props.fromCase
    reportType.value = Number(props.reportType)
    baseInfo.brandLogo = props.baseInfo?.brandLogo ?? ''
    baseInfo.generateTime = props.baseInfo?.generateTime
    baseInfo.reportNo = props.baseInfo?.reportNo
    baseInfo.vin = props.baseInfo?.vin
    baseInfo.plateNo = props.baseInfo?.plateNo
    baseInfo.licensePlateColor = Number(props.baseInfo?.licensePlateColor) || 2
    baseInfo.models = props.baseInfo?.models
    baseInfo.brandname = props.baseInfo?.brandname
    baseInfo.orderNo = props.baseInfo?.orderNo
    baseInfo.fuelType = props.baseInfo?.fuelType
    baseInfo.displacement = props.baseInfo?.displacement
    baseInfo.listingTime = props.baseInfo.listingTime
    //(1.绿牌；2.蓝牌的；3.其他)
    carPlateNoColor.value = props.baseInfo.licensePlateColor
        ? Number(props.baseInfo.licensePlateColor) === 1
            ? 'green'
            : 'blue'
        : 'blue'

    //报告状态
    reportQueryFail.value = props.status
    reportExpire.value = props.reportExpire
    reportLoad.value = props.reportLoad
    scoreLevel.value = Number(props.scoreLevel) - 1
    if (props.reportExpire) {
        baseInfo.vin = setVin(props.baseInfo?.vin)
    }
})

const setVin = (vin: string) => {
    const arr = vin.split('')
    //從索引2開始刪除12個長度，添加12個*
    arr.splice(2, 12, '************')
    return arr.join('')
}
</script>

<style scoped lang="scss">
.waiting {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--cxl-color-white);
    z-index: 10000;
    box-sizing: border-box;
    padding: var(--cxl-size-16);

    .waiting-img {
        width: 15rem;
        height: 10rem;
        background-image: url('../../../assets/images/css_sprites.png');
        background-size: auto 10rem;
        animation: move 1.5s steps(10, end) infinite;
        margin: 10rem auto 0 auto;
    }
    h1 {
        font-size: var(--cxl-size-18);
        text-align: center;
        margin-top: var(--cxl-size-28);
    }
    p {
        text-align: center;
        font-size: var(--cxl-size-15);
        margin-top: var(--cxl-size-16);
    }
}
@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: -150rem 0;
    }
}
.reportExpire {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--cxl-color-white);
    z-index: 9999;
    box-sizing: border-box;
    padding: 0 var(--cxl-size-16);

    .icon {
        margin: calc(var(--cxl-size-40) + var(--cxl-size-30)) auto var(--cxl-size-22) auto;
        width: calc(var(--cxl-size-18) * 10);
        img {
            display: block;
            width: 100%;
        }
    }
    h1 {
        font-weight: 600;
        text-align: center;
        font-size: var(--cxl-size-18);
        line-height: var(--cxl-size-28);
    }
    p {
        margin: var(--cxl-size-20) 0 var(--cxl-size-6);
        text-align: center;
        color: var(--cxl-color-666666);
        font-size: var(--cxl-size-14);
    }
    span {
        display: block;
        text-align: center;
        color: var(--cxl-color-666666);
        font-size: var(--cxl-size-14);
    }
    .goback {
        width: 100%;
        height: calc(var(--cxl-size-30) + var(--cxl-size-20));
        border-radius: var(--cxl-size-28);
        background-color: var(--cxl-color-primary);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: var(--cxl-size-15);
        color: var(--cxl-color-white);
        margin-top: var(--cxl-size-40);
    }
}
.loading-shade {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--cxl-color-white);
    z-index: 9999;
}

.level {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: var(--cxl-size-20);
    margin-bottom: var(--cxl-size-12);
    .level-li {
        width: 22%;
        span {
            width: 80%;
            line-height: var(--cxl-size-36);
            font-size: var(--cxl-size-15);
            color: var(--cxl-color-666666);
            display: block;
            margin: auto;
            border-radius: var(--cxl-size-20);
            position: relative;
            &::after {
                content: '';
                width: 0;
                height: 0;
                border-top: var(--cxl-size-16) solid var(--cxl-color-F59A23);
                border-right: var(--cxl-size-16) solid transparent;
                border-left: var(--cxl-size-16) solid transparent;
                display: none;
                position: absolute;
                left: 50%;
                bottom: calc(0% - var(--cxl-size-10));
                transform: translate(-50%, 0);
            }
        }
        i {
            margin-top: var(--cxl-size-20);
            width: 100%;
            height: var(--cxl-size-8);
            background-color: var(--cxl-color-EFEFEF);
            display: block;
        }
        &:nth-child(1) {
            i {
                border-radius: var(--cxl-size-6) 0 0 var(--cxl-size-6);
            }
        }
        &:last-child {
            i {
                border-radius: 0 var(--cxl-size-6) var(--cxl-size-6) 0;
            }
        }
        &.active_0 {
            span {
                background-color: var(--cxl-color-primary);
                color: var(--cxl-color-white);
                &::after {
                    border-top: var(--cxl-size-16) solid var(--cxl-color-primary);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-primary);
            }
        }
        &.active_1 {
            span {
                background-color: var(--cxl-color-368AF7);
                color: var(--cxl-color-white);
                &::after {
                    border-top: var(--cxl-size-16) solid var(--cxl-color-368AF7);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-368AF7);
            }
        }
        &.active_2 {
            span {
                background-color: var(--cxl-color-F59A23);
                color: var(--cxl-color-white);
                &::after {
                    border-top: var(--cxl-size-16) solid var(--cxl-color-F59A23);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-F59A23);
            }
        }
        &.active_3 {
            span {
                background-color: var(--cxl-color-ff5448);
                color: var(--cxl-color-white);
                &::after {
                    border-top: var(--cxl-size-16) solid var(--cxl-color-ff5448);
                    display: block;
                }
            }
            i {
                background-color: var(--cxl-color-ff5448);
            }
        }
    }
}

.fail {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    .fail-body {
        img {
            display: block;
            width: 50%;
            margin: auto;
        }
        p {
            font-size: var(--cxl-size-15);
            text-align: center;
            margin-top: var(--cxl-size-10);
        }
    }
}
.report-box {
    width: 100%;
    box-sizing: border-box;
    padding: 0rem var(--cxl-size-16) 1.5rem var(--cxl-size-16);

    background-repeat: no-repeat;
    background-size: 100% auto;

    &.blue {
        background-image: url('../../../assets/images/picture_lscp.png');
    }
    &.green {
        background-image: url('../../../assets/images/picture_lvscp.png');
    }
    &.yellow {
        background-image: url('../../../assets/images/picture_hscp.png');
    }
    &.white {
        background-image: url('../../../assets/images/picture_bscp.png');
        .report-code {
            color: var(--cxl-color-black);
        }
    }
}

.car-type {
    text-align: center;
    box-sizing: border-box;
    span {
        display: block;
        width: 100%;
        color: var(--cxl-color-white);
        &:nth-child(1) {
            padding-top: var(--cxl-size-28);
            font-size: var(--cxl-size-20);
            font-weight: 600;
        }
        &:nth-child(2) {
            font-size: var(--cxl-size-14);
            margin-top: var(--cxl-size-8);
            font-weight: 400;
        }
        &:nth-child(3) {
            font-size: var(--cxl-size-13);
            margin-top: var(--cxl-size-8);
            font-weight: 400;
        }
    }
}

.report-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--cxl-size-12);
    color: var(--cxl-color-white);
    margin-top: var(--cxl-size-30);
}
.car {
    box-sizing: border-box;
    padding: var(--cxl-size-12);
    background-color: var(--cxl-color-white);
    border-radius: var(--cxl-size-6);
    margin-top: var(--cxl-size-8);

    &.new-energy {
        border-radius: var(--cxl-size-6) var(--cxl-size-6) 0 0;
    }

    .car-content {
        display: flex;
        align-items: center;
    }
    .car-logo {
        width: 4rem;
        height: 4rem;
        img {
            display: block;
            width: 100%;
        }
    }
    .car-detailed {
        margin-left: var(--cxl-size-6);
        h1 {
            font-size: var(--cxl-size-18);
            display: flex;
            align-items: center;
            i {
                background-repeat: no-repeat;
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 5.82rem;
                height: 1.5rem;
                color: var(--cxl-color-white);
                font-size: var(--cxl-size-12);
                margin-left: var(--cxl-size-6);
                white-space: nowrap;
                &.blue {
                    background-image: url('../../../assets/images/icon_lscp@3x.png');
                }
                &.green {
                    background-image: url('../../../assets/images/icon_lvscp@3x.png');
                }
                &.yellow {
                    background-image: url('../../../assets/images/icon_hscp@3x.png');
                }
                &.white {
                    color: var(--cxl-color-black);
                    background-image: url('../../../assets/images/icon_bscp@3x.png');
                }
            }
        }
        p {
            font-size: var(--cxl-size-12);
            margin-top: var(--cxl-size-6);
        }
    }

    .new-energy {
        text-align: center;
        border-top: 1px solid #f0f0f0;
        margin-top: var(--cxl-size-14);
        h2 {
            font-size: var(--cxl-size-28);
            color: var(--cxl-color-F59A23);
            margin-top: var(--cxl-size-18);
        }
        h3 {
            font-size: var(--cxl-size-15);
            color: var(--cxl-color-333333);
            margin: var(--cxl-size-8) 0;
            font-weight: 400;
        }
        h4 {
            font-size: var(--cxl-size-13);
            color: var(--cxl-color-999999);
        }
    }
}

.report-box {
    background-color: var(--cxl-color-f2f6f8);
}
.report-main {
    height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #fff;

    #report {
        position: relative;
    }
}
.go-top {
    position: fixed;
    bottom: 10rem;
    right: 2rem;
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 50%;
    background-color: var(--cxl-color-white);
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
    z-index: 2000;
    > span {
        transform: rotate(180deg);
        display: block;
        margin-top: var(--cxl-size-6);
        > span {
            font-size: 1.8rem;
        }
    }
    font-size: var(--cxl-size-12);
    font-weight: bold;
    text-align: center;
    color: var(--cxl-color-666666);
}
.down-share {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1001;
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    background-color: var(--cxl-color-white);
    padding: var(--cxl-size-12);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
    &.active {
        > section {
            justify-content: center;
            span {
                &:nth-child(1) {
                    width: 70%;
                }
            }
        }
    }
    > section {
        display: flex;
        justify-content: space-between;

        height: calc(var(--cxl-size-45) + var(--cxl-size-16));
        span {
            display: flex;
            align-items: center;
            justify-content: center;
            height: var(--cxl-size-45);
            font-size: var(--cxl-size-15);
            border-radius: calc(var(--cxl-size-45) / 2);

            &:nth-child(1) {
                // width: 50%;
                // background-color: var(--cxl-color-primary);
                // color: var(--cxl-color-white);
                width: 40%;
                border: 1px solid var(--cxl-color-primary);
                color: var(--cxl-color-primary);
            }
            &:nth-child(2) {
                width: calc(60% - var(--cxl-size-12) - var(--cxl-size-12));
                background-color: var(--cxl-color-primary);
                color: var(--cxl-color-white);
            }
        }
    }
}

.share-hint {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    box-sizing: border-box;
    padding: 1rem 1rem 0 6rem;
    img {
        display: block;
        width: 100%;
    }
}

.download-image {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 3000;
    background-color: rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    padding: 4rem 4rem 6rem 4rem;
    overflow: hidden;
    .img-box {
        width: 100%;
        height: calc(100% - 3rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        img {
            display: block;
            width: 100%;
        }
    }
    p {
        text-align: center;
        color: var(--cxl-color-white);
        margin-top: var(--cxl-size-6);
        font-size: var(--cxl-size-13);
    }
    .close {
        > span {
            font-size: 2rem;
        }
        color: var(--cxl-color-white);
        width: 2rem;
        height: 2rem;
        position: absolute;
        bottom: 4.5rem;
        left: calc(50% - 1rem);
    }
}
.statement {
    font-size: var(--cxl-size-14);
    line-height: 1.8;
    margin-top: var(--cxl-size-10);
    color: var(--cxl-color-666666);
    box-sizing: border-box;
    padding: var(--cxl-size-16) 0;
    margin-bottom: env(safe-area-inset-bottom);
    p {
        font-size: var(--cxl-size-16);
        font-weight: 600;
    }
    &.active {
        padding-bottom: calc(var(--cxl-size-72) + var(--cxl-size-45));
    }
    &.new-energy {
        padding: 0;
        margin-top: var(--cxl-size-30);
    }
    &.noun {
        padding: 0;
        &.active {
            padding-bottom: calc(var(--cxl-size-72) + var(--cxl-size-45));
        }
    }
}
</style>
